<template>
    <div class="box">
        <!-- 导航栏 -->
        <Nav1></Nav1>
        <!-- 网易图标 -->
        <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="">
        <!-- 两个按钮 -->
        <van-button type="danger" class="btn1" @click="goPhone">
            <van-icon class="icon" name="orders-o" size="25" />手机账号登陆
        </van-button>
        <van-button plain type="info" class="btn2" color="red " @click="goEmail">
            <van-icon class="icon" name="cart-o" size="25" />邮箱账号登陆
        </van-button>
        <!-- 三个图标 -->
        <div class="icons">
            <img src="./image/weixin.png" class="icon">
            <img src="./image/qq.png" class="icon">
            <img src="./image/weibo.jpg" class="icon3">
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
// 引入组件
import Nav1 from '@/components/nav1'
import Vue from 'vue';
import { Icon, Button } from 'vant';
Vue.use(Icon)
Vue.use(Button);
export default {
    name: 'Login',
    components: {
        Nav1,

    },
    methods:{
        goPhone(){
            this.$router.replace('/phone')
        },
        goEmail(){
           this.$router.replace('/email') 
        }
    }
}
</script>

<style lang="less" scoped>
.box {
    background-color: #f2f5f4;

    img {
        display: block;
        width: 134px;
        height: 45px;
        margin: 80px auto;
    }

    .btn1 {
        width: 335px;
        display: block;
        margin: 0 auto;

        .icon {
            margin-right: 7px;
        }

    }

    .btn2 {
        width: 335px;
        display: block;
        margin: 10px auto;

        .icon {
            margin-right: 7px;
        }
    }
    .icons{
        display: flex;
        margin-top: 100px;
        .icon{

            display: block;
            width: 56px;
            height: 17px;
            padding-right: 10px;
            padding-bottom: 2px;
            padding-top: 2px;
            border-right: 1px solid rgb(148, 147, 147);
            margin-right: -37px;
        }
        .icon3{
            display: block;
            width: 56px;
            height: 17px;
            padding-right: 10px;
            padding-bottom: 2px;
            padding-top: 2px;
            
        }
    }
}
</style>